<template>
  <el-dropdown placement="bottom-start">
    <span class="el-dropdown-link">
      <el-avatar icon="el-icon-user-solid"></el-avatar>
    </span>
    <el-dropdown-menu
      slot="dropdown"
      split-button="true"
    >
      <h1 style="text-align:center;color:lightblue">{{username1}}</h1>
      <el-dropdown-item>
        <router-link
          to='/user'
          class="el-icon-s-home"
        > 个人中心</router-link>
      </el-dropdown-item>

      <el-dropdown-item>
        <router-link
          to='/ask_question'
          class="el-icon-question"
        > 我的提问</router-link>
      </el-dropdown-item>

      <el-dropdown-item>
        <router-link
          to='/contest'
          class="el-icon-tickets"
        > 我的比赛</router-link>
      </el-dropdown-item>

      <el-dropdown-item>
        <router-link
          to='/team'
          class="el-icon-connection"
        > 我的团队</router-link>
      </el-dropdown-item>

      <el-dropdown-item v-if="flag===1">
        <router-link
          to='/administrator'
          class="el-icon-s-custom"
        > 管理员界面</router-link>
      </el-dropdown-item>

      <el-dropdown-item
        divided
        style="text-align: center;"
      >
        <el-button
          type="text"
          icon="el-icon-switch-button"
          @click.native="logout"
        >注销
        </el-button>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import { request } from 'network/request'
export default {
  name: 'UserLogin',
  mounted () {
    if (sessionStorage.getItem('username') === 'caiyunqi' || sessionStorage.getItem('username') === 'soledad') { this.flag = 1 }
  },
  data () {
    return {
      username1: sessionStorage.getItem('username'),
      flag: 0
    }
  },
  methods: {
    logout () {
      request({
        url: '/user/logout',
        method: 'post'
      }).then(res => {
        this.$message({
          message: '注销成功',
          type: 'success',
          duration: 3000
        })
        sessionStorage.setItem('token', '')
        setTimeout(function () { location.reload() }, 1000)
      })
    }
  }
}
</script>

<style lang = "less" scoped>
.userinfo {
  text-align: center;
  width: 100px;
}

.el-dropdown-menu__item {
  text-align: center;
}
</style>
